<template>
    <div class="pane">
        <div class="box head">
            <div class="item">
                朋友列表
            </div>
        </div>
        <div v-for="item in firendList" :key="item.index" class="box">
            <div class="item">{{ item.friendNote }}</div>
        </div>        
    </div>
</template>
<script setup>
import { computed, onMounted, onUnmounted, getCurrentInstance,ref,reactive, nextTick } from 'vue';
import { userApi } from '@/api/apis/user';

const firendList=ref([]);

nextTick(()=>{
    userApi.getFriendList({pageNum:1,pageSize:20}).then((res)=>{
        if(res && res.code==0){
        //   tableTotal.value=res.data.total;
           firendList.value=res.data.tList;
        }
    })
})
</script>
<style lang="css">
.pane{
    padding: 5px;
    box-sizing: border-box;
    .box{
        height: 40px;
        width: 100%;
        padding-left: 5px;
        padding-top: 10px;
        padding-bottom: 5px;
        display: flex;
        align-items: center;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        margin-bottom: -1px;
    }
    .head{
        font-size: 17px;
        font-weight: 500;
        background-color: #f6f6f7;
    }
   
}
</style>